---
/**
 *
 * Header
 * see https://github.com/Tailus-UI/astro-theme
 *
 */

import Container from "../Container/index.astro";

import LogoSvg from "./assets/logo.svg";
---

<header>
  <nav class="w-full absolute top-0 z-10 bg-white">
    <Container>
      <div class="w-[96%] sm:w-full flex flex-wrap items-center justify-between py-2 gap-6 md:py-4 md:gap-0 relative">
        <input aria-hidden="true" type="checkbox" name="toggle_nav" id="toggle_nav" class="hidden peer" />
        <div class="relative z-20 w-full flex justify-between lg:w-max md:px-0">
          <a href="/" aria-label="logo" class="flex space-x-2 items-center">
            <img src={LogoSvg} class="h-10" alt="tange.ai" />
          </a>

          <div class="relative flex items-center lg:hidden max-h-10">
            <label role="button" for="toggle_nav" aria-label="humburger" id="hamburger" class="relative p-6 -mr-6">
              <div
                aria-hidden="true"
                id="line"
                class="m-auto h-0.5 w-5 rounded bg-sky-900 dark:bg-gray-300 transition duration-300"
              >
              </div>
              <div
                aria-hidden="true"
                id="line2"
                class="m-auto mt-2 h-0.5 w-5 rounded bg-sky-900 dark:bg-gray-300 transition duration-300"
              >
              </div>
            </label>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="fixed z-10 inset-0 h-screen w-screen bg-white/70 backdrop-blur-2xl origin-bottom scale-y-0 transition duration-500 peer-checked:origin-top peer-checked:scale-y-100 lg:hidden dark:bg-gray-900/70"
        >
        </div>
        <div
          class="flex-col z-20 flex-wrap gap-6 p-8 rounded-3xl border border-gray-100 bg-white shadow-2xl shadow-gray-600/10 justify-end w-full invisible opacity-0 translate-y-1 absolute top-full left-0 transition-all duration-300 scale-95 origin-top lg:relative lg:scale-100 lg:peer-checked:translate-y-0 lg:translate-y-0 lg:flex lg:flex-row lg:items-center lg:gap-0 lg:p-0 lg:bg-transparent lg:w-7/12 lg:visible lg:opacity-100 lg:border-none peer-checked:scale-100 peer-checked:opacity-100 peer-checked:visible lg:shadow-none dark:shadow-none dark:bg-gray-800 dark:border-gray-700"
        >
          <div class="text-black dark:text-gray-300 lg:pr-4 lg:w-auto w-full lg:pt-0">
            <ul class="tracking-wider font-medium lg:text-sm flex-col flex lg:flex-row gap-6 lg:gap-0">
              <li>
                <a href="/" class="block md:px-4 transition hover:text-primary">
                  <span>首页</span>
                </a>
              </li>
              <li>
                <a id="goto-cases-link" href="javascript:void(0)" class="block md:px-4 transition hover:text-primary">
                  <span>应用案例</span>
                </a>
              </li>
              <li>
                <a
                  href="https://tange-ai.feishu.cn/wiki/wikcnFiXkphfdRu71SKqpFOW9eb"
                  class="block md:px-4 transition hover:text-primary"
                  target="dev-doc"
                >
                  <span>开发者文档</span>
                </a>
              </li>
              <li>
                <a
                  href="https://tange-ai.feishu.cn/share/base/form/shrcnj1il40PxS8c2ADQN0fygmc"
                  class="block md:px-4 transition hover:text-primary"
                  target="contact-us"
                >
                  <span>联系我们</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Container>
  </nav>
</header>

<style>
  #toggle_nav:checked ~ div #hamburger #line {
    @apply rotate-45 translate-y-1.5;
  }

  #toggle_nav:checked ~ div #hamburger #line2 {
    @apply -rotate-45 -translate-y-1;
  }
</style>

<script>
  document.getElementById("goto-cases-link").addEventListener("click", () => {
    // hide menu modal
    document.getElementById("hamburger").click();

    document.getElementById("cases").scrollIntoView({
      behavior: "smooth",
    });
  });
</script>
